<template>
  <div id="left3" style="width: 440px;height:300px;position:absolute;left: 10px;top: 10px"></div>
</template>

<script>
export default {
  data() {
    return {}
  },
  created() {
  },
  mounted() {
    this.left3()
  },
  methods: {
    left3() {
      let echarts = require('echarts')
      var chartDom = document.getElementById('left3');
      var myChart = echarts.init(chartDom, 'dark');
      var option;

      var data = [];
      for (let i = 0; i < 5; ++i) {
        data.push(Math.round(Math.random() * 200));
      }

      option = {
        xAxis: {
          max: 'dataMax',
        },
        yAxis: {
          type: 'category',
          data: ['曾小贤', '张伟', '吕子乔', '关谷', '陆展博'],
          inverse: true,
          animationDuration: 300,
          animationDurationUpdate: 300,
          max: 2 // only the largest 3 bars will be displayed
        },
        series: [{
          realtimeSort: true,
          name: '驾驶路程/公里',
          type: 'bar',
          data: data,
          label: {
            show: true,
            position: 'right',
            valueAnimation: true
          }
        }],
        legend: {
          show: true
        },
        animationDuration: 0,
        animationDurationUpdate: 3000,
        animationEasing: 'linear',
        animationEasingUpdate: 'linear'
      };

      function run() {
        var data = option.series[0].data;
        for (var i = 0; i < data.length; ++i) {
          if (Math.random() > 0.9) {
            data[i] += Math.round(Math.random() * 2000);
          } else {
            data[i] += Math.round(Math.random() * 200);
          }
        }
        myChart.setOption(option);
      }

      setTimeout(function () {
        run();
      }, 0);
      setInterval(function () {
        run();
      }, 3000);

      option && myChart.setOption(option);

    }
  }
}
</script>

<style scoped>

</style>
